<template>
	<view class="yg-cart" v-click>
		<view v-if="carts.length===0">
			<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3298947587,976044362&fm=15&gp=0.jpg">
			</image>
			<navigator url="/pages/category/category" open-type="switchTab" style="text-align: center;">去逛逛</navigator>
		</view>
		<view v-else class="yg-cart-content">
			<view class="yg-cart-list">
				<uni-swipe-action>
					<uni-swipe-action-item v-for="(cart,index) in carts" :key="cart.goods_id" :right-options="options"
						@click="onClick(index,$event)">
						<view class="cart-list-item">
							<view class="list-item-left">
								<view :class="['iconfont',cart.check?'icon-xuanzhong':'icon-icon-test1']"
									@click="handclick(index)">
								</view>
							</view>
							<view class="list-item-mid">
								<image :src="cart.goods_big_logo" mode=""></image>
							</view>
							<view class="list-item-right">
								<view class="item-right-top">
									{{cart.goods_name}}
								</view>
								<view class="item-right-bottom">
									<view class="right-bottom-left">
										￥{{cart.goods_price}}
									</view>
									<view class="right-bottom-right">
										<view class="iconfont icon-iconset0187" @click="toReduce(index)">

										</view>
										<view class="num">
											{{cart.num}}
										</view>
										<view class="iconfont icon-54" @click="add(index)">

										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<view class="yg-cart-bottom">
				<view class="cart-bottom-left">
					<view @click="addcheckClick"    :class="['iconfont',addchecked?'icon-xuanzhong':'icon-icon-test1']">
					</view>
					<view class="allCheckedNum">
						全选
					</view>
					<view class="text1">
						合计
					</view>
					<view class="price">
					{{totals}}
					</view>
				</view>
				<view class="cart-bottom-right">
					<view class="bottom-right-btn" v-if="numbers!=0">
						去结算({{numbers}})
					</view>
					<view class="bottom-right-disable" v-else>
						去结算(0)
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		onShow() {
			let carts = wx.getStorageSync("carts") || []
			console.log(carts)
			this.carts = carts
		},
		data() {
			return {
				carts: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},

		methods: {
			handclick: function(index) {

				let check = !this.carts[index].check
				this.carts[index].check = check
				console.log(this.carts[index].check)
			},

			// 增加按钮
			add: function(index) {
				if (this.carts[index].num + 1 <= this.carts[index].goods_number) {
					this.carts[index].num += 1
					uni.showToast({
						title: '增加成功'
					})
				}
			},
			//减少按钮
			toReduce: function(index) {

				if (this.carts[index].num === 0) {
					uni.showModal({
						title: '提示',
						content: '是否确定要删除本商品',
						success: (res) => {
							if (res.confirm) {
								this.carts.splice(index, 1)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				} else {
					this.carts[index].num -= 1
					uni.showToast({
						title: '减少成功'
					})
				}
			},
			onClick: function(index, e) {
				if (e.content.text === '删除') {
					this.carts.splice(index, 1)
				}
			},
			//全选
			addcheckClick:function(){
				let addcheck=!this.addchecked
				this.carts.forEach(v=>{
					v.check=addcheck
				})
			}
		},
		watch: {
			carts: {
				deep: true,
				handler: function(val, oldVal) {
					uni.setStorageSync("carts", val);
				}
			}
		},
		computed: {
			addchecked: function() {
				return this.carts.every(v => v.check)
			},
			totals:function(){
				let num=0
				this.carts.map(v=>{
					if(v.check){
						num+=v.num*v.goods_price
					}
				})
				return num
			},
			numbers:function(){
				let number=0
				this.carts.map(v=>{
					if(v.check){
						number+=v.num
					}
				})
				return number
			}
		}

	}
</script>

<style lang="less" scoped>
	.yg-cart {
		.yg-cart-content {
			.yg-cart-list {
				height: calc(100vh - 88rpx);
				overflow-y: scroll;

				.cart-list-item {
					display: flex;

					.list-item-left {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.icon-icon-test1 {
							color: #ddd;
						}
						
						.icon-xuanzhong {
							color: #4CD964;
						}
					}

					.list-item-mid {
						flex: 2;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							height: 190rpx;
							width: 190rpx;
						}
					}

					.list-item-right {
						flex: 4;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						height: 190rpx;

						.item-right-top {
							font-size: 24rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.item-right-bottom {
							display: flex;
							justify-content: space-between;

							.right-bottom-left {
								color: #ee6d77;
                                 
						.icon-icon-test1 {
							color: #ddd;
						}

						.icon-xuanzhong {
							color: #4CD964;
						}
							
							}

							.right-bottom-right {
								display: flex;
								align-items: center;

								.icon-iconset0187 {
									margin-right: 20rpx;
								}

								.num {
									margin-right: 20rpx;
									color: #9f9f9f;
								}

								.iconfont {}
							}
						}
					}
				}

			}

			.yg-cart-bottom {
				border-top: 2rpx solid #ddd;
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				padding: 5rpx;

				.cart-bottom-left {
					display: flex;
					align-items: center;


				
				.icon-icon-test1 {
					color: #ddd;
				}
				
				.icon-xuanzhong {
					color: #4CD964;
				}
					.allCheckedNum {
						margin-right: 20rpx;
						color: #c7c7c7;
						font-size: 20rpx;
					}

					.text1 {
						margin-right: 20rpx;
						font-size: 26rpx;
					}

					.price {
						color: #ea4350;
					}
				}



				.cart-bottom-right {
					display: flex;
					align-items: center;

					.bottom-right-btn {
						border-radius: 26rpx;
						background-color: #ea4350;
						color: white;
						height: 50rpx;
						width: 150rpx;
						font-size: 20rpx;
						text-align: center;
						line-height: 50rpx;
					}

					.bottom-right-disable {
						border-radius: 26rpx;
						background-color: #ccc;
						color: white;
						height: 50rpx;
						width: 150rpx;
						font-size: 20rpx;
						text-align: center;
						line-height: 50rpx;
					}
				}
			}
		}
	}
</style>
